<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            width: 0px;
            height: 0px;
            list-style: none;
        }
        .a1 {
            height: 300px;
            width: 831px;
           margin-right: 20px;
           margin-left: 0px;
            float: left;
        }
        .a2{
            height: 100px;
            width: 300px;
            float: right;
            
            
           
        }
        .a3{
            height: 100px;
            width: 300px;
            float: right;
          
            
        }
        .a4{
            height: 100px;
            width: 300px;
            float: right;
            
          
        }
        .a{
            width: 1164px;
            height: 300px;
            background-color: chartreuse;
            
            
        }
        .b{
            height: 40px;
            width: 600px;
            background-color: gold;
            margin: 25px auto;
           
        }
        .b input{
          height: 35px;
          width: 80px;
        }
        .c{
            width: 1188px;
            height: 945px;
            background-color: brown;
            margin-left: auto;
            
            
            
            } 
          .c1{
              height: 315px;
              width: 297px;
              float: left;
          }
          .p1{
            text-align: center;

          }
          .p2{
            text-align: center;
          }
          .p3{
            text-align: center;
          }
          .p4{
            text-align: center;
          }
          .p5{
            text-align: center;
          }
          .p6{
            text-align: center;
          }
          .p7{
            text-align: center;
          }
          .p8{
            text-align: center;
          }
          .p9{
            text-align: center;
          }
          .p10{
            text-align: center;
          }
          .p11{
            text-align: center;
          }
          .p12{
            text-align: center;
          }
          
          .c2{
            height: 315px;
            width: 297px;
            float: right;
              
          }
          .c3{
            height: 315px;
              width: 297px;
              float: right;
            
              
             
          }
          .c4{
            height: 315px;
              width: 297px;
              float: right;
              
          }
          .c5{
            height: 315px;
              width: 297px;
             float: left;
          }
          .c6{
            height: 315px;
              width: 297px;
              float: right;
            
          }
          .c7{
            height: 315px;
              width: 297px;
              float: right;
           
          }
          .c8{
            height: 315px;
              width: 297px;
              float: right;
             

          }
          .c9{
            height: 315px;
              width: 297px;
              float: left;
              
          }
          .c10{
            height: 315px;
              width: 297px;
              float: right;
              
          }
          .c11{
            height: 315px;
              width: 297px;
              float: right;
             
          }
          .c12{
            height: 315px;
              width: 297px;
              float: right;
              
          }



        .v{
            width: 1400px;
            height: 20px;
            background-color: aqua;
            margin: 0px auto ;
        }
        p{
          margin: auto;
          
        }
        





        .m{
          margin: 20px auto;
          width: 1400px;
          height: 200px;
          background-color: white;
          float: left;
        }
        .m1{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
          
        }
        .m2{
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 50px;
            margin-top: 20px;
            
            
        }
        .m3{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
        }
        .m4{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
        }
        .m5{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
        }
        .m6{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
        }
        .m7{
          width: 100px;
          height: 100px;
          float: left;
          margin-left: 50px;
          margin-top: 20px;
        }



    </style>
</head>
<body>
            <div class="a">
         
             
                 <div class="a1">
                <img src="images/s003.jpg" alt="" class="a1">
                    </div>
                 <div class="a2">
                <img src="images/s02.jpg" alt="" class="a2">
                      </div>
                    <div class="a3">
                <img src="images/s03.jpg" alt="" class="a3">
                   </div>
                    <div class="a4">
                <img src="images/s04.jpg" alt="" class="a4">
                </div>
                  
             
         
                
      </div>


            <div class="b">
                  最新 <input type="text">
                  最热 <input type="text">
                   热议<input type="text">
                  随机 <input type="text">
            </div>

            <div class="c">
                
                          <div class="c1">
                          <p1>用水才能檫去笔记，它只想保护好设计师的痕迹</p1>
                             <img src="images/i01.jpg" alt="" class="c1">
                          </div>
                          
                          <div class="c2">
                            <p2> 马桶也要有优雅的姿态</p2>
                           <img src="images/i02.jpg" alt=""class="c2">
                          </div>
                           
                  <div class="c3">
                    <p3>健身也走科技范，你以为这仅仅只是个瑜伽垫</p3>
                    <img src="images/i03.jpg" alt=""class="c3">
                   </div>

                    <div class="c4">
                      <p4></p4>
                        <img src="images/i04.jpg" alt=""class="c4">
                    </div>
                        
                      <div class="c5">
                        <p5></p5>
                        <img src="images/i05.jpg" alt=""class="c5">
                     </div>
                      <div class="c6">
                        <p6></p6>
                        <img src="images/i06.png" alt=""class="c6">
                       </div>
                      <div class="c7">
                        <p7></p7>
                        <img src="images/i07.jpg" alt=""class="c7">
                         </div>
                       <div class="c8">
                         <p8></p8>
                        <img src="images/i07.png" alt=""class="c8">
                        </div>
                       <div class="c9">
                         <p9></p9>
                         <img src="images/i08.jpg" alt=""class="c9">
                       </div>
                            <div class="c10">
                              <p10></p10>
                         <img src="images/i09.jpg" alt=""class="c10">
                          </div>
                        <div class="c11">
                          <p11></p11>
                        <img src="images/i10.jpg" alt=""class="c11">
                           </div>
                        <div class="12">
                             <p12></p12>
                        <img src="images/i11.jpg" alt=""class="c12">
                         </div>   
            </div>



            <div class="v">
              <p>太快了吧,慢慢来</p>
            </div>


            <div class="m">

              <div class="m1">
                <img src="images/x01.png" alt=""class="m1">
              </div>

              <div class="m2">
                    <img src="images/x02.png" alt=""class="m2">
              </div>

                <div class="m3">
                    <img src="images/x03.png" alt=""class="m3">
                </div>

                <div class="m4">
                     <img src="images/x04.png" alt=""class="m4">
                </div>

                <div class="m5">
                   <img src="images/x05.png" alt=""class="m5">
                </div>

                <div class="m6">
                      <img src="images/x06.png" alt=""class="m6">
                </div>

                <div class="m7">
                         <img src="images/x07.jpg" alt="" class="m7">
                </div>

            </div>
            


    
</body>
</html>